<template>
  <div>
    <el-row>
      <el-col :span="9">
        <el-button type="primary" size="mini" @click="addDeptDialog = true">添加部门</el-button>
        <el-button type="primary" size="mini" @click="isCheck ? addSonDeptDialog = true: open('请选择上级')">添加下级</el-button>
        <el-button type="primary" :disabled="!hasPerm('system:dept:del')" size="mini" @click="deleteDept()">删除部门</el-button>
        <el-card class="box-card" shadow="never" body-style="padding: 5px;" >
          <span style="font-size: 6px">当前选择：{{checkDept.name}}</span>
        </el-card>
        <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterDeptText"
            size="mini"
            style="width: 350px;">
        </el-input>
        <el-tree :filter-node-method="filterDeptNode"
                 v-loading="loading"
                 :expand-on-click-node="false"
                 :data="deptData"
                 :props="deptTreeProps"
                 ref="tree"
                 @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="1">
        <el-divider direction="vertical" class="el-divider--vertical"></el-divider>
      </el-col>
      <el-col :span="14">
        <div class="grid-content bg-purple-light">
          <el-tabs v-model="activeName">
            <el-tab-pane label="部门信息" name="first">
              <template v-if="isCheck">
                <el-form :model="checkDept" :rules="rules" ref="checkDept" label-width="100px">
                  <el-form-item label="部门名称" size="small" prop="name">
                    <el-input v-model="checkDept.name"></el-input>
                  </el-form-item>
                  <el-form-item label="顺序" prop="seq" size="small">
                    <el-input type="number" v-model="checkDept.seq"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" size="small" @click="editDept('checkDept')">保存</el-button>
                  </el-form-item>
                </el-form>
              </template>
              <template v-else>
                <el-empty description="请选择一个部门"></el-empty>
              </template>
            </el-tab-pane>
            <el-tab-pane label="部门用户" name="second">
              <template v-if="isCheck">
                <el-table
                    :data="deptUser"
                    style="width: 100%">
                  <el-table-column
                      prop="name"
                      label="姓名"
                      width="150">
                  </el-table-column>
                  <el-table-column
                      prop="telephone"
                      label="电话"
                      width="150">
                  </el-table-column>
                  <el-table-column
                      prop="email"
                      label="邮箱"
                      width="250">
                  </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNo"
                    :page-sizes="[5,10, 20, 50]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
                </el-pagination>
              </template>
              <el-empty v-else description="请选择一个部门"></el-empty>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-dialog title="添加部门" :visible.sync="addDeptDialog" width="40%" center>
        <el-form :model="addDept" ref="addDept" :rules="rules" label-width="80px">
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="addDept.name" size="small"></el-input>
          </el-form-item>
          <el-form-item label="部门顺序" prop="seq">
            <el-input type="number" v-model="addDept.seq" size="small"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDeptDialog = false" size="small">取 消</el-button>
          <el-button type="primary" @click="saveDept('addDept')" size="small">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="添加子级部门" :visible.sync="addSonDeptDialog" width="40%" center>
        <el-form :model="addDept" ref="addSonDept" :rules="rules" label-width="120px">
          <el-form-item label="上级部门名称">
            <el-input v-model="checkDept.name" :disabled="true" size="small"></el-input>
          </el-form-item>
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="addDept.name" size="small"></el-input>
          </el-form-item>
          <el-form-item label="部门顺序" prop="seq">
            <el-input type="number" v-model="addDept.seq" size="small"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addSonDeptDialog = false" size="small">取 消</el-button>
          <el-button type="primary" @click="saveSonDept('addSonDept')" size="small">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>



</template>

<script>

import { getDeptTree,updateDept,saveDept,deleteDept,getDeptUser } from '@/api/dept/index'

let id = 1000;
export default {
  name: "Dept",
  data(){
    return {
      filterDeptText: '',
      addDeptDialog: false,
      addSonDeptDialog: false,
      page:{
        pageNo: 1,
        pageSize: 5,
        total: 0
      },
      deptUser:[],
      deptTreeProps: {
        children: 'sonDeptTreeList',
        label: 'name'
      },
      isCheck:false,
      activeName: 'first',
      deptData: [],
      checkDept:{},
      addDept:{},
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        seq: [
          { required: true,message: '请输入数字', trigger: 'blur'}
        ]
      },
      loading:true,
    }
  },
  created() {
    setTimeout(this.getDeptTree, 500);
  },
  watch: {
    filterDeptText(val) {
      console.log("filterDeptText")
      this.$refs.tree.filter(val);
    }
  }
  ,
  methods:{
    deleteDept(){
      if (!this.isCheck){
        this.open('请选择一个部门');
      }
      deleteDept(this.checkDept.id).then(res =>{
        this.getDeptTree();
      })
    },
    saveSonDept(formName){
      if (!this.isCheck){
        this.open('请选择上级');
      }
      this.$refs[formName].validate((valid) => {
        if(!valid){
          return
        }
        this.addDept.parentId=this.checkDept.id;
        saveDept(this.addDept).then(res =>{
          this.addDept={};
          this.addSonDeptDialog = false;
          this.getDeptTree();
        });
      })
    },
    saveDept(formName){
      this.$refs[formName].validate((valid) => {
        if (valid){
          this.addDept.parentId='0';
          saveDept(this.addDept).then(res =>{
            this.getDeptTree();
            this.addDept={};
            this.addDeptDialog = false;
            this.getDeptTree();
          });
        }
      });
    },
    getDeptTree() {
      getDeptTree().then(res => {
        this.deptData = res.data
        this.loading = false;
      })
    },
    editDept(formName) {
      if (this.isCheck == false){
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateDept(this.checkDept).then(res =>{
            this.open('更新成功')
            this.getDeptTree();
          })
        }
      });
    },
    getUserFun(deptId,page){
      getDeptUser(page,deptId).then(res =>{
        this.deptUser = res.data.records
        this.page.total = res.data.total
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.getUserFun(this.checkDept.id,this.page);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page.pageNo = val;
      this.getUserFun(this.checkDept.id,this.page);
    },
    handleNodeClick(data) {
      this.isCheck = true;
      this.checkDept = data;
      this.getUserFun(data.id, {pageNo: 1,pageSize: 5});
    },
    open(message) {
      this.$message({
        showClose: true,
        message: message,
        type: 'success'
      });
    },
    filterDeptNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    }
  }
}
</script>

<style scoped>
.el-divider--vertical{
  height: 450px;
  vertical-align: text-top;
}
.el-form-item {
  width: 400px
}
.box-card {
  width: 350px;
  height: 30px;
  margin: 5px 0px;
  background-color: #e6f7ff;
  padding: 0px;
  border: #1482f0;
}
</style>
